@font-face {
  font-family: BASE;
  src: local(Helvetica), local('PingFang SC'), local('思源黑体'), local('Microsoft YaHei');
}

html {
  width: 100vw;
  min-height: 100vh;
  font-family: BASE;
  font-size: 16px;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

body {
  @apply h-screen w-screen text-gray-700 overflow-hidden;
  font-size: 16px;

  #__nuxt,
  #__layout {
    @apply w-full h-full bg-white overflow-hidden;
  }
}


#default-layout {
  @apply h-full;
  transition: $transition;

  &.full-screen {
    @apply p-0;

    #layout-container {
      border-radius: 0;
    }
  }

  @media (max-width: 479px) {
    @apply p-0 bg-white;

    #layout-container {
      border-radius: 0;
    }
  }

  @media (min-width: 480px) {
    @apply p-0 bg-white;
  }

  @media (min-width: 980px) {
    @apply p-8 bg-gray-200;
  }

  @media (min-width: 1280px) {
    @apply p-10 bg-gray-200;
  }

  @media (min-width: 1920px) {
    display: flex;
    justify-content: center;
  }
}

#layout-container {
  @apply relative w-full h-full bg-white overflow-hidden;
  min-height: 500px;
  border-radius: 1.5rem;
}

.page-enter-active,
.page-leave-active {
  transition: opacity .3s;
}

.page-enter,
.page-leave-active {
  opacity: 0;
}

::selection {
  color: white;
  background: rgba(var(--ns-primary), 0.8);
}

::-webkit-scrollbar {
  width: 15px;
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #C0C0C0;
  border: 4px solid #F9F9F9;
}

::-webkit-scrollbar-track-piece {
  background-color: #F9F9F9;
}